<template>
    <div class="common-layout">
     <el-container>
       <!-- 设置宽度 -->
       <el-aside width="auto">
           <!-- 2.使用组件 -->
           <Ln/>
       </el-aside>
       <el-container>
         <el-header>
             <Tr/>
         </el-header>
         <el-main>
           <!-- 路由出口设置 -->
           <router-view></router-view>
         </el-main>
       </el-container>
     </el-container>
    </div>
    </template>
    <script setup lang="ts">
    // 1.引用组件
    import Ln from "../../components/LeftNav.vue"
    import Tr from "../../components/TopNav.vue"
    import { useStore } from 'vuex';
    const store = useStore()
    </script>
    <style lang="scss" scoped>
.common-layout {
    .el-aside {
        background-color: #545c64;
    }

    .el-header {
        line-height: 70px;

        .el-icon {
            font-size: 20px;
        }
    }

    .el-main {
        background-color: gainsboro;
    }
}

// 高度100%
.el-aside,
.el-container,
.common-layout,
#app,
body,
html {
    height: 100%;
}
    </style>